<template>
  <div id="page" style="width: 800px;height: 800px;"/>
</template>

<script>
import "./register-items.js";
import './register-model.js'

export default {
  props: {
    flowData: {
      type: Object
    }
  },
  mounted() {
    const page = new G6Editor.Flow({
      graph: {
        container: "page",
        height: window.innerHeight - 120,
        modes: {
          default: ['panCanvas', 'dragEdgeControlPoint']
        }
      },
      align: {
        grid: true
      }
    });
    page.read(this.flowData);
    // 一下是测试切自动切换动画换动画的
    const graph = page.getGraph()
    let nodes = graph.getNodes()
    let i = 0
    const Val = setInterval(() => {
      
      nodes[i].animate = false
      page.update(nodes[i], {
        color: `#${this.$uuid(6, 100)}`
      })
      nodes[i + 1].animate = true
      page.update(nodes[i + 1], {
        color: `#${this.$uuid(6, 100)}`
      })
      i += 1
      if (i > 2) {
        clearInterval(Val)
      }
    }, (parseInt(Math.random() * 10) + 1) * 1000)
    
  }
};
</script>
